<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>

<template>
<form action=""><label for="">注册新用户</label>
<hr>
<el-card style="max-width: 1200px">
    <template #header>
      <div class="card-header">
        <el-form
    style="max-width: 1000px"
    status-icon
    label-width="auto"
    class="demo-ruleForm"
  >
    <el-form-item label="用户名" prop="pass">
      <el-input type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="登录邮箱" prop="pass">
      <el-input type="text" autocomplete="off" />
    </el-form-item>
    <el-form-item label="密码" prop="checkPass">
      <el-input
        type="password"
        autocomplete="off"
      />

    </el-form-item>
    <el-form-item label="再输一次" prop="checkPass">
      <el-input
        type="password"
        autocomplete="off"
      />

    </el-form-item>
    
  </el-form>
 </div>
    </template>
  
    <label for="">个人资料</label>
    <br>
    <el-form-item>
    <label for="">性别</label>
    <el-radio value="1">男</el-radio>
    <el-radio value="2">女</el-radio>
  </el-form-item>
  <label for="">学历</label><el-select v-model="value" placeholder="本科" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  
  </el-select>
  <br>
  <label for="">职业</label><el-select v-model="value" placeholder="在校学生" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
    
  </el-select>
  <br>
  <label for="">所在城市</label><el-select v-model="value" placeholder="帝都" style="width: 240px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <br>
  <label for="">出生年月</label>
  <el-select v-model="value" placeholder="1985" style="width: 100px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
  <el-select v-model="value" placeholder="1月" style="width: 100px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
<br>
<el-form-item>
<label for="">猜你喜欢</label>
<el-checkbox-group v-model="checkList">
    <el-checkbox label="体育" value="Value A" />
    <el-checkbox label="音乐" value="Value B" />
    <el-checkbox label="游戏" value="Value C" />
    <el-checkbox label="八卦" value="Value C" />
    <el-checkbox label="吐槽" value="Value e"  />
    
  </el-checkbox-group>
</el-form-item>
<el-radio value="1" size="large">我已仔细阅读并接受</el-radio>
<el-link underline>注册条款</el-link>









  <el-form-item>
      <el-button type="primary" >
        提交
      </el-button>
      <el-button >重置</el-button>
    </el-form-item>
 

  </el-card>



</form> 

</template>

<style scoped>

</style>
